<%@ page import="com.pp.tourism.web.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="tourism" value="<%=request.getContextPath()%>"/>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tourism</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="${tourism}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${tourism}/css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="${tourism}/css/style.css">
    <link rel="stylesheet" type="text/css" href="${tourism}/css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="${tourism}/images/icon.png">
    <link rel="shortcut icon" href="${tourism}/images/favicon.ico">
    <script src="${tourism}/js/jquery-2.1.4.min.js"></script>
    <script src="${tourism}/js/nprogress.js"></script>
    <script src="${tourism}/js/jquery.lazyload.min.js"></script>
</head>
<body class="user-select single">
<header class="header">
    <nav class="navbar navbar-default" id="navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#header-navbar" aria-expanded="false"><span class="sr-only"></span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
                <h1 class="logo hvr-bounce-in"><a href="#" title="牛江明网络博客"><img src="${tourism}/images/201610171329086541.png"
                                                                               alt="牛江明网络博客"></a></h1>
            </div>
            <div class="collapse navbar-collapse" id="header-navbar">
                <form class="navbar-form visible-xs" action="/Search" method="post">
                    <div class="input-group">
                        <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20"
                               autocomplete="off">
                        <span class="input-group-btn">
		<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
		</span></div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a data-cont="牛江明网络博客" title="牛江明网络博客" href="${tourism}/">首页</a></li>
                    <li>
                        <c:if test="${sessionScope.get('USERNAME')!=null}"><a id="loginUser" data-cont="列表页" title="列表页"
                                                                               href="#">${sessionScope.get('USERNAME').username}用户,你好</a></c:if>
                        <c:if test="${sessionScope.get('USERNAME')==null}">
                            <a id="loginUser" data-cont="列表页" title="列表页" href="${tourism}/login">登陆</a>
                        </c:if>
                    </li>
                    <%--<li><a data-cont="详细页" title="详细页" href="show.html">详细页</a></li>--%>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section class="container">
    <div class="content-wrap">
        <div class="content">
            <header class="article-header">
                <h1 class="article-title"><a id="showTitle" href="#" title="用DTcms做一个独立博客网站（响应式模板）">用DTcms做一个独立博客网站（响应式模板）</a></h1>
                <div class="article-meta"> <span class="item article-meta-time">
	  <time id="createtime" class="time" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="发表时间：2016-10-14"><i
              class="glyphicon glyphicon-time"></i> 2016-10-14</time>
	  </span> <span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="牛江明网络博客"><i class="glyphicon glyphicon-globe"></i> 牛江明网络博客</span>
                     <span id="viewCount"  class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title=""
                            data-original-title="评论量" ><i class="glyphicon glyphicon-comment"></i> 4</span>
                    <div id="viewGoodOnClick" style="display: inline-block">
                        <span id="viewGood" class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title=""
                          data-original-title="点赞量：219">
                            <i class="glyphicon glyphicon-hand-up"></i> 219
                        </span>
                    </div>
                </div>
            </header>
            <article class="article-content">
                <p>
                    <img id="jdImg" src="${tourism}/images/201610181557196870 .png"
                         alt="牛江明网络博客"></p>
                <div id="information" style="margin-top: 30px;margin-bottom: 30px;padding-left: 20px;">
                    <div class="title" style="width: 350px;float: left;margin-right: 40px">
                        <h3>状态:大师分散大发</h3>
                    </div>
                    <div class="title" style="width: 350px;margin-left: 10px">
                        <h3>价格:大师分散大发</h3>
                    </div>
                    <div class="title" style="width: 350px;float: left;margin-right: 40px">
                        <h3>开放时间:大师分散大发</h3>
                    </div>
                    <div class="title" style="width: 350px;margin-left: 10px">
                        <h3>结束时间:大师分散大发</h3>
                    </div>
                    <div class="title" style="width: 97%;margin-top: 35px;">
                        <h3>景点介绍景点介绍景点介绍景点介绍景点介绍景点介绍景点介绍景点介绍景点介绍景点介绍景点介绍</h3>
                    </div>
                </div>

                <div id="postcomments">
                    <ol id="comment_list" class="commentlist">
                       <%-- <li class="comment-content">
                            <span class="comment-f">#1</span>
                            <div class="comment-main">
                                <p>
                                    <a class="address" href="#" rel="nofollow" target="_blank" >牛江明网络博客</a>
                                    <span class="time tt" >回复</span>
                                    <br>博客做得好漂亮哦！<br>
                                    <img src="images/201610241227558789.jpg" style="display:block;margin:0px;height: 90px;" >
                                </p>
                                <input style="blackground-color:#000;height:auto;margin-top:10px;border:0.5px #CCD4D9 solid;display: none;float: left"><button id="vibut" style="margin-top: 8px;margin-bottom: 10px;display: none;">提交</button>
                                <div>
                                    <span style="display: block;margin-left: 30px;">xxx回复xxx:</span>
                                    博客做得好漂亮哦！
                                </div>
                                <div>
                                    <span style="display: block;margin-left: 30px;">xxx回复xxx:</span>
                                    博客做得好漂亮哦！
                                </div>
                            </div>
                        </li>--%>
                    </ol>
                </div>
                <div class="title" id="comment">
                    <h3>评论</h3>
                </div>
                <div id="respond">
                    <form id="comment-form" name="comment-form" action="" method="POST">
                        <div class="comment">
                            <div id="uploadimg">
                                <%--<img src="images/201610241227558789.jpg" style="width: 90px;height: 90px;float: left;margin-right: 20px;" >--%>
                            </div>
                            <input class="btn btn-default btn-search" style="margin:15px 15px 15px 15px;width: 40%;"
                                   id="file" multiple="multiple" type="file">
                            <div class="comment-box" >
                                <textarea placeholder="您的评论或留言（必填）" name="comment-textarea" id="comment-textarea"
                                          cols="100%" rows="3" tabindex="3" style="text-indent:5px"></textarea>
                                <div class="comment-ctrl">
                                    <button type="button" name="comment-submit" id="comment-submit" tabindex="4">评论
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="relates">
                    <div class="title">
                        <h3>相关推荐</h3>
                    </div>
                    <ul>
                        <li><a href="#" title="">用DTcms做一个独立博客网站（响应式模板）-MZ-NetBlog主题</a></li>
                        <li><a href="#" title="">用DTcms做一个独立博客网站（响应式模板）-MZ-NetBlog主题</a></li>
                    </ul>
                </div>
        </div>
    </div>
    <aside class="sidebar">
        <div class="fixed">
            <div class="widget widget-tabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab"
                                                              data-toggle="tab" draggable="false">统计信息</a></li>
                    <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab"
                                               draggable="false">联系站长</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane contact active" id="notice">
                        <h2>日志总数:
                            888篇
                        </h2>
                        <h2>网站运行:
                            <span id="sitetime">88天 </span></h2>
                    </div>
                    <div role="tabpanel" class="tab-pane contact" id="contact">
                        <h2>QQ:
                            <a href="" target="_blank" rel="nofollow" data-toggle="tooltip" data-placement="bottom"
                               title="" draggable="false" data-original-title="QQ:577211782">577211782</a>
                        </h2>
                        <h2>Email:
                            <a href="mailto:577211782@qq.com" target="_blank" data-toggle="tooltip" rel="nofollow"
                               data-placement="bottom" title="" draggable="false"
                               data-original-title="Email:577211782@qq.com">577211782@qq.com</a></h2>
                    </div>
                </div>
            </div>
            <div class="widget widget_search">

                    <%--<button id="upload" class="btn btn-default btn-search" style="margin:15px 15px 15px 15px;width: 92%;"
                            onclick="getUpload()">上传
                </button>--%>
            </div>
        </div>
        <div class="widget widget_hot">
            <h3>最新评论</h3>
            <ul id="newView">
                <%--<li>
                    <a title="景点景点景点111" href="http://localhost/tourism/show" >
                        <span class="thumbnail" style="margin-right: 20px;">
                            <img class="thumb" data-original="images/201610181739277776.jpg" src="images/201610181739277776.jpg" alt="用DTcms做一个独立博客网站（响应式模板）"  style="display: block;">
			            </span>
                        <span class="text" style="margin-top: 15px;margin-bottom: 13px;">景点景点景点111</span>
                        <span class="muted">
                          <i class="glyphicon glyphicon-time"></i>2019-3-22
			            </span>
                        <span class="muted"><i class="glyphicon glyphicon-comment"></i> 216</span></a>
                </li>--%>
            </ul>
        </div>
        <div class="widget widget_sentence">
            <h3>友情链接</h3>
            <div class="widget-sentence-link">
                <a href="https://www.dianping.com/" title="网站建设" target="_blank">大众点评</a>&nbsp;&nbsp;&nbsp;
            </div>
        </div>
    </aside>
</section>
<footer class="footer">
    <div class="container">
        <p>旅游信息分享系统</p>
    </div>
    <div id="gotop"><a class="gotop"></a></div>
</footer>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
<script>
    $(function(){
        //获取地址栏id：
        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
        })(jQuery);

        //时间转换
        (function ($) {
            $.getDate = function (date) {
                var date = new Date(date);
                var Y=date.getFullYear();
                var M=date.getMonth()+1;
                var D=date.getDate();
                return Y+"-"+M+"-"+D;
            }
        })(jQuery);

        //加载景点详细信息
        $.ajax({
            url: '${tourism}/scenicSpot/querySport',
            type: 'POST',
            cache: false,
            data: $.getUrlParam('id'),
            contentType: false,
            success: function (data) {
                /*console.log(data);*/
                var scenicOpenTime = $.getDate(data.data.scenicOpenTime);
                var scenicCloseTime = $.getDate(data.data.scenicCloseTime);
                var createTime = $.getDate(data.data.createTime);
                var status="";
                if(data.data.scenicStatus==='CLOSED'){
                    status="营业中";
                }
                if(data.data.scenicStatus==='OPEN'){
                    status="休息中";
                }
                if(data.data.scenicStatus==='MAINTAINANCE'){
                    status="维护中";
                }

                if(data.data!=null){
                    $("#information div").remove();
                    $("#information").append(
                        "<div class='title' style='width: 350px;float: left;margin-right: 40px'>"+
                        "<h3>状态:"+status+"</h3>"+
                        "</div>"+
                        "<div class='title' style='width: 350px;margin-left: 10px'>"+
                        "<h3>价格:"+data.data.scenicPrice+"</h3>"+
                        "</div>"+
                        "<div class='title' style='width: 350px;float: left;margin-right: 40px'>"+
                        "<h3>开放时间:"+scenicOpenTime+"</h3>"+
                        "</div>"+
                        "<div class='title' style='width: 350px;margin-left: 10px'>"+
                        "<h3>结束时间:"+scenicCloseTime+"</h3>"+
                        "</div>"+
                        " <div class='title' style='width: 97%;margin-top: 35px;'>"+
                        "<h3>"+data.data.scenicContent+"</h3>"+
                        "</div>"
                    );
                    $("#createtime").attr('data-original-title',createTime).html("").append(
                        "<i class='glyphicon glyphicon-time'></i>"+createTime
                    );
                    $("#viewCount").attr('data-original-title',data.data.updateBy).html("").append(
                        "<i class='glyphicon glyphicon-comment'></i>"+data.data.updateBy
                    );
                    $("#viewGood").attr('data-original-title',data.data.createBy).html("").append(
                        "<i class='glyphicon glyphicon-hand-up'></i>"+data.data.createBy
                    );
                    $("#showTitle").html(data.data.scenicName);
                    //景点图片
                    $("#jdImg").attr('src',data.data.scenicImgUrl);
                }
            }
        });

        //加载右侧最新评论
        $.ajax({
            url: '${tourism}/scenicSpot/queryNewView',
            type: 'POST',
            cache: false,
            contentType: false,
            success: function (data) {
                /*console.log(data);*/
                for (var i = 0; i < data.data.length & i < 3; i++) {
                    var date = new Date(data.data[i].scenicOpenTime);
                    var Y=date.getFullYear();
                    var M=date.getMonth()+1;
                    var D=date.getDate();
                    date =Y+"-"+M+"-"+D;
                    $("#newView").append(
                        "<li>" +
                        "<a title='"+data.data[i].scenicName+"' href='${tourism}/show?id="+data.data[i].id+"'>" +
                        "<span class='thumbnail' style='margin-right: 20px;'>" +
                        "<img class='thumb' data-original='${tourism}/"+data.data[i].scenicImgUrl+"' src='${tourism}/"+data.data[i].scenicImgUrl+"' alt='用DTcms做一个独立博客网站（响应式模板）' style='display: block;'>" +
                        "</span>" +
                        "<span class='text' style='margin-top: 15px;margin-bottom: 13px;'>"+data.data[i].scenicName+"</span>" +
                        "<span class='muted'>" +
                        "<i class='glyphicon glyphicon-time'></i>"+date+"</span>" +
                        "<span class='muted'><i class='glyphicon glyphicon-comment'></i>"+data.data[i].view+"</span></a>" +
                        "</li>"
                    )
                }
            }
        });

        //加载评论
        $.ajax({
            url: '${tourism}/userCommentTop/getCommentTop',
            type: 'put',
            cache: false,
            data: $.getUrlParam('id'),
            contentType: false,
            success: function (data) {
                console.log(data.data[0]);
                for(var i=0;i<Object.keys(data.data).length;i++){
                    //截取图片
                    var commentImgUrl = data.data[i].commentImgUrl.substring(1,data.data[i].commentImgUrl.length-1);
                    var arr = new Array();
                    arr=commentImgUrl.split(",");
                    var imgHtml="";
                    for(var k=0;k<arr.length;k++){
                       imgHtml+="<img src='"+arr[k]+"' style='display:block;margin:0px;height: 90px;' >";
                    }
                    if(Object.keys(data.data[i].countucnom).length){
                        //二级回复
                        var replayHtml=""
                        for(var r=0;r<Object.keys(data.data[i].countucnom).length;r++){
                            replayHtml+="<div>"
                                +"<span style='display: block;margin-left: 30px;'>"+data.data[i].countucnom[r].node_replyUserId+"回复"+data.data[i].countucnom[r].node_mainUserId+":</span>"
                                +"<label>"+data.data[i].countucnom[r].node_comment+"</label>"
                                +"</div>";
                        }

                        $("#comment_list").append(
                            "<li class='comment-content'>"+
                            "<div class='comment-main'>"+
                            "<p>"+
                            "<a class='address' href='#' rel='nofollow' target='_blank' id='"+data.data[i].userId+"' >"+data.data[i].username+"</a>"+
                            "<span class='time tt' >回复</span><br>"+data.data[i].comment+imgHtml+
                            "</p>"+
                            "<input id='"+data.data[i].userId+"' name='"+data.data[i].topid+"' style='blackground-color:#000;height:auto;margin-top:10px;border:0.5px #CCD4D9 solid;display: none;float: left'>" +
                            "<button class='sbtn' style='margin-top: 8px;margin-bottom: 10px;display: none;'>提交</button>"+
                            replayHtml+"</li>"
                        );
                    }else {
                        $("#comment_list").append(
                            "<li class='comment-content'>"+
                            "<div class='comment-main'>"+
                            "<p>"+
                            "<a class='address' href='#' rel='nofollow' target='_blank' id='"+data.data[i].userId+"'>"+data.data[i].username+"</a>"+
                            "<span class='time tt' >回复</span><br>"+data.data[i].comment+"<br>"+imgHtml+
                            "</p>"+
                            "<input id='"+data.data[i].userId+"' name='"+data.data[i].topid+"' style='blackground-color:#000;height:auto;margin-top:10px;border:0.5px #CCD4D9 solid;display: none;float: left'>" +
                            "<button class='sbtn' style='margin-top: 8px;margin-bottom: 10px;display: none;'>提交</button>"+
                            "</li>"
                        );
                    }
                }
            }
        });
    });

    //点击事件--动态绑定
    $(document).on("click",'.tt',function () {
        var dsp = $(this).parent('p').nextAll('input').css('display');
        if (dsp == 'block') {
            $(this).parent('p').nextAll('input').css('display', 'none');
            $(this).parent('p').nextAll('button').css('display', 'none');
        }
        if (dsp == 'none') {
            $(this).parent('p').nextAll('input').css('display', 'block');
            $(this).parent('p').nextAll('button').css('display', 'block');
        }
    });

    //二级回复
    $(document).on("click",'.sbtn',function () {
        var mainuserid = $(this).prev('input').attr("id");
        var content = $(this).prev('input').val();
        var scenicid = $.getUrlParam('id');
        var topid=$(this).prev('input').attr("name");
        console.log(topid);

        var attr = $("#loginUser").attr("href");
        if(attr==="#"){
            var myName="${session.getAttribute("USERNAME").username()}";
            var formdata={
                "mainuserid":mainuserid,
                "content":content,
                "scenicid":scenicid,
                "replayname":myName,
                "topid":topid
            }
            $.ajax({
                url: '${tourism}/userCommentNode/getCommentNodes',
                type: 'post',
                dataType: "json",
                cache: false,
                data: JSON.stringify(formdata),
                contentType: "application/json;charset=UTF-8",
                success: function (result) {
                    console.log(result);
                    if(result.data){
                        alert("回复成功!")
                        window.location.reload();
                    }else{
                        alert("回复失败")
                        window.location.reload();
                    }
                }
            });

        }else{
            alert("请先登录!");
            window.location.href="${tourism}/login";
        }
    });

    //点赞
    $('#viewGoodOnClick').click(function () {
        var attr = $("#loginUser").attr("href");
        if(attr==="#"){
            var myName="${session.getAttribute("USERNAME").username()}";
            var formdata={
                "scenicId":$.getUrlParam('id'),
                "username":myName
            }
            $.ajax({
                url: '${tourism}/scenicRecommend/recommend',
                type: 'post',
                dataType: "json",
                cache: false,
                data: JSON.stringify(formdata),
                contentType: "application/json;charset=UTF-8",
                success: function (result) {
                    if(result.code==="500"){
                        alert("已赞过,请别重复")
                        window.location.reload();
                    }else{
                        alert("谢谢点赞")
                        window.location.reload();
                    }
                }});
        }else{
            alert("请先登录!");
            window.location.href="${tourism}/login";
        }
    })

    //评论
    $("#comment-submit").click(function () {
        var attr = $("#loginUser").attr("href");
        if(attr==="#"){
            var myName="${session.getAttribute("USERNAME").username()}";
            var arr =new Array();
            var data ={
                "username":myName,
                "comment":$("#comment-textarea").val(),
                "scenicId":$.getUrlParam('id'),
                "commentImgUrl":arr
            }
            $("#uploadimg").children("img").each(function () {
               arr.push($(this).attr('src'));
            })
            $.ajax({
                url: '${tourism}/userCommentTop/commentTop',
                type: 'post',
                dataType: "json",
                cache: false,
                data: JSON.stringify(data),
                contentType: "application/json;charset=UTF-8",
                success: function (result) {
                    alert("评论成功!");
                    window.location.reload();
                }
            });
        }else{
            alert("请先登录!");
            window.location.href="${tourism}/login";
        }
    })

    //多文件上传代码---注:formdata百度一下
    var uploading=false;
    $("#file").change(function () {
        var length = this.files.length;
        var length = this.files.length;
       var formdata = new FormData();
       for (let i = 0; i < length; i++) {
           formdata.append('files', $('#file')[0].files[i]);
       }
       if(uploading){
            alert("文件上传中...");
            return true;
        }
       $.ajax({
           url: '${tourism}/upload',
           type: 'POST',
           dataType: "json",
           cache: false,
           data: formdata,
           processData: false,
           contentType: false,
           success: function (data) {
               $("#uploadimg img").remove();
               /*console.log(data);*/
               if (data.length!=0) {
                   for(var i=0;i<data.length && i<3;i++) {
                       $("#uploadimg").append(
                           "<img src='images/"+data[i]+"' style='width: 90px;height: 90px;float: left;margin-right: 20px;' >"
                       );
                   }
                   alert("上传成功");
               } else {
                   alert("上传失败")
               }
               uploading = false;
           }
       });
   });
</script>
</body>
</html>
